$(function () {
	var CommonModal = {
		name: 'CommonModal',
		props: {
			title: String,
			visible: Boolean,
			showClose: {
				type: Boolean,
				default: true
			},
			width: {
				type: String,
				default: '740px'
			}
		},
		data: {
			showModal: false
		},
		created: function () {
			this.showModal = this.visible
		},
		methods: {
			closeModal: function () {
				this.showModal = false
				this.$emit('update:visible', this.showModal)
			}
		},
		template: '\t<transition name="fade">\n' +
			'\t\t\t<section class="modal" v-show="visible">\n' +
			'\t\t\t\t<section class="modal-content" :style="{width: width}">\n' +
			'\t\t\t\t\t<section class="title">{{ title }}</section>\n' +
			'<slot></slot>' +
			'<section class="modal-footer">' +
			'<slot name="footer"></slot>' +
			'</section>' +
			'<img v-if="showClose" class="close-icon" @click="closeModal" src="./images/icons/close-icon.png" alt="">' +
			'\t\t\t\t</section>\n' +
			'\t\t\t</section>\n' +
			'\t\t</transition>'
	}
	var CommonHeader = {
		props: {
			activePath: String
		},
		data: function () {
			return {
				unReadCount: 0,
				navs: [
					{path: 'index.html', name: '首页'},
					{path: 'about.html', name: '关于竞赛'},
					{path: 'match-item.html', name: '赛项'},
					{path: 'news.html', name: '通知公告'},
					{path: 'notice.html', name: '赛项说明'}
				],
				userInfo: getUserInfo()
			}
		},
		created: function () {
			var vm = this
			this.userInfo && ClientNewsgetUnReadNum('', function (data) {
				vm.unReadCount = data.length
			}, function () {})
		},
		methods: {
			logOut: function () {
				this.$confirm({
					title: '确定退出登录吗？',
					success: function () {
						localStorage.clear()
						window.location="login.html"
					}
				})
			}
		},
		template: '<header class="common-header">\n' +
			'\t\t<img src="./images/register-logo.png" alt="">\n' +
			'\t\t<nav class="nav">\n' +
			'\t\t\t<a v-for="nav in navs" :href="nav.path" :class="{active: nav.path === activePath}">{{ nav.name }}</a>\n' +
			'\t\t\t<template v-if="!userInfo">\n' +
			'\t\t\t\t<a href="./login.html" class="btn login">登录</a>\n' +
			'\t\t\t\t<a href="./register.html" class="btn register">注册</a>\n' +
			'\t\t\t</template>\n' +
			'\t\t\t<section v-else class="dropdown">\n' +
			'\t\t\t\t<img class="avatar" src="./images/icons/default-avatar.png" alt="">\n' +
			'\t\t\t\t<span class="username">{{ userInfo.name}}</span>\n' +
			'\t\t\t\t<img class="dropdown" src="./images/icons/dropdown.png" alt="">\n' +
			'\t\t\t\t<section class="dropdown-menu">\n' +
			'\t\t\t\t\t<a href="./personal.html"><img src="./images/icons/user-icon.png" alt="">个人中心</a>\n' +
			'\t\t\t\t\t<a href="./message.html">' +
			'\t\t\t\t\t\t\t<span class="badge" v-if="unReadCount">{{ unReadCount }}</span>\n' +
			'<img src="./images/icons/message-icon.png" alt="">' +
			'消 息</a>\n' +
			'\t\t\t\t\t<a href="javascript:;" @click="logOut" class="log-out">退出</a>\n' +
			'\t\t\t\t</section>\n' +
			'\t\t\t</section>\n' +
			'\t\t</nav>\n' +
			'\t</header>'
	}
	var UserTabs = {
		props: {
			activePath: String
		},
		data: function () {
			return {
				unReadCount: 0,
				userInfo: getUserInfo()
			}
		},
		created: function () {
			if (!this.userInfo) {
				return location.href = './login.html'
			}
			var vm = this
			ClientNewsgetUnReadNum('', function (data) {
				vm.unReadCount = data.length
			}, function () {})
		},
		mounted: function () {
		},
		template: '<section class="left-tab">\n' +
			'\t\t\t\t<section class="user-info">\n' +
			'\t\t\t\t\t<section class="user-avatar">\n' +
			'\t\t\t\t\t\t<img src="./images/icons/user-avatar.png" alt="">\n' +
			'\t\t\t\t\t</section>\n' +
			'\t\t\t\t</section>\n' +
			'\t\t\t\t<section class="tabs">\n' +
			'\t\t\t\t\t<section class="username">\n' +
			'\t\t\t\t\t\t{{ userInfo.name }} \n' +
			'\t\t\t\t\t</section>\n' +
			'\t\t\t\t\t<a href="./personal.html" class="tab-item" :class="{active: activePath === \'personal.html\'}">\n' +
			'\t\t\t\t\t\t<section>\n' +
			'\t\t\t\t\t\t\t<img src="./images/icons/champion.png" alt="">\n' +
			'\t\t\t\t\t\t\t我的赛项\n' +
			'\t\t\t\t\t\t</section>\n' +
			'\t\t\t\t\t\t<img src="./images/icons/right.png" alt="">\n' +
			'\t\t\t\t\t</a>\n' +
			'\t\t\t\t\t<a href="./message.html" class="tab-item" :class="{active: activePath === \'message.html\'}">\n' +
			'\t\t\t\t\t\t<section>\n' +
			'\t\t\t\t\t\t\t<span class="badge" v-if="unReadCount">{{ unReadCount }}</span>\n' +
			'\t\t\t\t\t\t\t<img src="./images/icons/message.png" alt="">\n' +
			'\t\t\t\t\t\t\t消息中心\n' +
			'\t\t\t\t\t\t</section>\n' +
			'\t\t\t\t\t\t<img src="./images/icons/right.png" alt="">\n' +
			'\t\t\t\t\t</a>\n' +
			'\t\t\t\t\t<a href="./question.html" class="tab-item" :class="{active: activePath === \'question.html\'}">\n' +
			'\t\t\t\t\t\t<section>\n' +
			'\t\t\t\t\t\t\t<img src="./images/icons/customer.png" alt="">\n' +
			'\t\t\t\t\t\t\t问题咨询\n' +
			'\t\t\t\t\t\t</section>\n' +
			'\t\t\t\t\t\t<img src="./images/icons/right.png" alt="">\n' +
			'\t\t\t\t\t</a>\n' +
			'\t\t\t\t\t<a href="./edit.html" class="tab-item" :class="{active: activePath === \'edit.html\'}">\n' +
			'\t\t\t\t\t\t<section>\n' +
			'\t\t\t\t\t\t\t<img src="./images/icons/edit-icon.png" alt="">\n' +
			'\t\t\t\t\t\t\t我的资料\n' +
			'\t\t\t\t\t\t</section>\n' +
			'\t\t\t\t\t\t<img src="./images/icons/right.png" alt="">\n' +
			'\t\t\t\t\t</a>\n' +
			'\t\t\t\t\t<a href="./password.html" class="tab-item" :class="{active: activePath === \'password.html\'}">\n' +
			'\t\t\t\t\t\t<section>\n' +
			'\t\t\t\t\t\t\t<img src="./images/icons/password-icon.png" alt="">\n' +
			'\t\t\t\t\t\t\t修改密码\n' +
			'\t\t\t\t\t\t</section>\n' +
			'\t\t\t\t\t\t<img src="./images/icons/right.png" alt="">\n' +
			'\t\t\t\t\t</a>\n' +
			'\t\t\t\t</section>\n' +
			'\t\t\t</section>'
	}
	var Empty = {
		props: {
			text: {
				type: String,
				default: '暂无数据哦'
			},
			src: {
				type: String,
				default: './images/empty.png'
			}
		},
		template: '<section class="empty">' +
			'<img :src="src" alt="">' +
			'<section class="text">{{ text }}</section>' +
			'</section>'
	}
	var CommonFooter = {
		data: function () {
			return {
				phone: '',
				email: ''
			}
		},
		created: function () {
			var vm = this
			WebInfogetObj(1, function (data) {
				vm.phone = data.phone
				vm.email = data.email
			})
		},
		template: '<section class="common-footer">\n' +
			'\t\t<section class="contact">\n' +
			'\t\t\t<section class="contact-content">\n' +
			'\t\t\t\t<section class="left">\n' +
			'\t\t\t\t\t<section class="sub-title">\n' +
			'\t\t\t\t\t\t<img src="./images/contact.png" alt="">\n' +
			'\t\t\t\t\t\t咨询热线：\n' +
			'\t\t\t\t\t</section>\n' +
			'\t\t\t\t\t<section class="phone-number">{{ phone }}</section>\n' +
			'\t\t\t\t\t<section class="address">\n' +
			'\t\t\t\t\t\t<section class="mail">\n' +
			'\t\t\t\t\t\t\t<img src="./images/email.png" alt="">\n' +
			'\t\t\t\t\t\t\t<span>电子邮箱：</span><a :href="\'mailto:\' + email">{{ email }}</a>\n' +
			'\t\t\t\t\t\t</section>\n' +
			'\t\t\t\t\t\t<section class="location">\n' +
			'\t\t\t\t\t\t\t<img src="./images/loc.png" alt="">\n' +
			'\t\t\t\t\t\t\t<span>地址：</span>北京市海淀区普惠南里13号楼中国电子学会\n' +
			'\t\t\t\t\t\t</section>\n' +
			'\t\t\t\t\t</section>\n' +
			'\t\t\t\t</section>\n' +
			'\t\t\t\t<section class="right">\n' +
			'\t\t\t\t\t<section class="code-item">\n' +
			'\t\t\t\t\t\t<img src="./images/program-code.png" alt="">\n' +
			'\t\t\t\t\t\t全国青少年电子信息智能创新大赛\n' +
			'\t\t\t\t\t</section>\n' +
			'\t\t\t\t\t<section class="code-item">\n' +
			'\t\t\t\t\t\t<img src="./images/h5_code.jpg" alt="">\n' +
			'\t\t\t\t\t\t中国电子学会科普中心\n' +
			'\t\t\t\t\t</section>\n' +
			'\t\t\t\t</section>\n' +
			'\t\t\t</section>\n' +
			'\t\t</section>\n' +
			'\t\t<footer>版权所有62016中国电子学会普及工作委员会京JCP备120-41980号</footer>\n' +
			'\t</section>'
	}
	Vue.component('CommonHeader', CommonHeader)
	Vue.component('CommonModal', CommonModal)
	Vue.component('UserTabs', UserTabs)
	Vue.component('Empty', Empty)
	Vue.component('CommonFooter', CommonFooter)
	var Confirm = {
		data: function () {
			return {
				title: '',
				showModal: false
			}
		},
		methods: {
			success: function () {},
			show: function () {
				this.showModal = true
			},
			confirm: function (options) {
				this.title = options.title
				this.success = options.success
				this.showModal = true
			},
			onConfirm: function () {
				this.showModal = false
				this.success()
			}
		},
		template: '<common-modal width="400px" :visible.sync="showModal" :title="title">' +
			'<template #footer>' +
			'<a href="javascript:;" @click="onConfirm">确认</a>' +
			'<a class="cancel-btn" href="javascript:;" @click="showModal = false">取消</a>' +
			'</template>' +
			'</common-modal>'
	}
	var VueComponent = Vue.extend(Confirm)
	var vm = new VueComponent().$mount()
	var init = false
	Vue.prototype.$confirm = function (options) {
		if (!init) {
			document.body.appendChild(vm.$el)
			init = true
		}
		return vm.confirm(options)
	}
	Vue.filter('substr', function (value, line) {
		line = line || 3
		value = value || ''
		if (line === 3 && value.trim().length > 188) return value.trim().slice(0, 188) + '...'
		if (line === 2 && value.trim().length > 83) return value.trim().slice(0, 83) + '...'
		return value
	})
})
